<template>
    <div>
        <div class="auth-contain">
            <div class="left-nav">
                <div><span class="title">权限项管理</span></div>
                <ul>
                    <el-tree
                        highlight-current	
                        :data="menuTreeList"
                        node-key="id"
                        :props="defaultProps"
                        :default-checked-keys="defaultChecked"
                        default-expand-all	
                        ref='authorityTree'
                        @current-change	='currentChange'  
                        :expand-on-click-node='false'	
                        >
                    </el-tree>
                </ul>
            </div>
            <div class="right-cont">
                <div><span class="title">下级权限</span></div>
                <ul ref='authObj'>
                    <li>
                        <span class="liTitle">名称</span>
                        <div class="liValue">
                            <div v-show="disabled">{{authObj.name}}</div>
                            <el-input
                                v-model="authObj.name"
                                v-show="!disabled"
                                size='small'></el-input>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">URL表达式</span>
                        <div class="liValue">
                            <div v-show="disabled">{{authObj.menuUrl}}</div>
                            <el-input
                                v-model="authObj.menuUrl"
                                v-show="!disabled"
                                size='small'></el-input>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">配置属性</span>
                        <div class="liValue">
                            <div v-show="disabled">{{authObj.properties}}</div>
                            <el-input
                                v-model="authObj.properties"
                                v-show="!disabled"
                                size='small'></el-input>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">权限类型</span>
                        <div class="liValue">
                            <div v-show="disabled" class="liInputModal">{{authObj.type === 1? '菜单': '功能'}}</div>
                            <el-radio-group v-show="!disabled" v-model="authObj.type">
                                <el-radio :label="1">菜单</el-radio>
                                <el-radio :label="2">功能</el-radio>
                            </el-radio-group>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">排序号</span>
                        <div class="liValue">
                            <div v-show="disabled">{{authObj.orderNum}}</div>
                            <input
                                class="small"
                                v-show="!disabled"
                                type="number"
                                v-model.number="authObj.orderNum" />
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">标识</span>
                        <div class="liValue">
                            <div v-show="disabled" class="liInputModal">{{authObj.mark === 1?'hr系统':'系统设置管理'}}</div>
                            <el-radio-group v-show="!disabled" v-model="authObj.mark">
                                <el-radio :label="1">hr系统</el-radio>
                                <el-radio :label="2">系统设置管理</el-radio>
                            </el-radio-group>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">图标</span>
                        <div class="liValue">
                            <i :class="authObj.menuIconCls"></i>
                            <el-select
                                v-show="!disabled"
                                v-model="authObj.menuIconCls"
                                size="small"
                                clearable
                                placeholder="请选择图标">
                                <el-option
                                    v-for='item in iconArr'
                                    :key='item'
                                    :label="item"
                                    :value="item">
                                    <i :class="item"></i>
                                    {{item}}
                                </el-option>
                            </el-select>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">父权限</span>
                        <div class="liValue">
                            <div>{{authObj.parentName}}</div>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">Last Update</span>
                        <div class="liValue">
                            <div>{{authObj.lastUpdated}}</div>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">Date Create</span>
                        <div class="liValue">
                            <div>{{authObj.dateCreated}}</div>
                        </div>
                    </li>
                    <li>
                        <span class="liTitle">子权限</span>
                        <div class="liValue">
                            <div>{{authObj.childToken}}</div>
                        </div>
                    </li>
                </ul>
                <div class="right-cont-button">
                    <el-button type='primary' @click.stop='addNodeClick'>新增</el-button>
                    <el-button  
                        v-show='disabled'
                        @click.stop='disabled = false'>编辑</el-button>
                    <el-button  
                        v-show='!disabled'
                        @click.stop='saveNodeClick'
                        type='success'
                        >保存</el-button>
                    <el-button  
                        v-show='!disabled'
                        @click.stop='cancelNodeClick'
                        type='warning'
                        >取消保存</el-button>
                    <el-button type='danger' @click.stop='deleteNodeClick'>删除</el-button>
                </div>      
            </div>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            size='tiny'
            :lock-scroll="false"
            >
            <span>确定保存吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click.stop="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click.stop="saveNodeSure">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="创建权限"
            :lock-scroll="false"
            :visible.sync="dialogFormVisible"
            ref="modalRef">
            <el-form :model="ruleForm" ref='ruleForm' :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="URL表达式" prop="menuUrl">
                    <el-input v-model="ruleForm.menuUrl"></el-input>
                </el-form-item>
                <el-form-item label="配置属性">
                    <el-input v-model="ruleForm.properties"></el-input>
                </el-form-item>
                <el-form-item label="权限类型">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">功能</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序号">
                    <input type="number" v-model.number="ruleForm.orderNum" />
                </el-form-item>
                <el-form-item label="标识">
                    <el-radio-group v-model="ruleForm.mark">
                        <el-radio :label="1">hr系统</el-radio>
                        <el-radio :label="2">系统设置管理</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="图标">
                    <el-select
                        v-model="ruleForm.menuIconCls"
                        clearable
                        placeholder="请选择图标">
                        <el-option
                            v-for='icon in iconArr'
                            :key='icon'
                            :label="icon"
                            :value="icon">
                            <i :class="icon"></i>
                            {{icon}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父权限">
                    <el-select
                        v-model="ruleForm.parentId"
                        clearable
                        placeholder="请选择父权限">
                        <el-option
                            v-for='item in formSelect'
                            :key='item.id'
                            :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.stop="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.stop="addNodeSure(ruleForm)">创 建</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import NavLi from '@/components/public/circleNav'
    import Vue from 'vue'
    import { Tree, Button, Dialog, Notification, MessageBox, Message, Select, Option, RadioGroup, Radio } from 'element-ui'
    Vue.use(Tree)
    Vue.use(Button)
    Vue.use(Dialog)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(RadioGroup)
    Vue.use(Radio)
    

    export default {
        data () {
            let validate = (rule, value, callback) => {
                if (value) {
                    // var strRegex = '^/([a-zA-Z0-9]+)(/[a-zA-Z0-9\*\?\=\&]{0,}||/[a-zA-Z0-9\*\=\?\&]{0,}/[a-zA-Z0-9\*\=\?\&]{0,})$';
                    // var re = new RegExp(strRegex);
                    // if (!re.test(value)) {
                    //     return callback(new Error('不合法的URL表达式，正确格式如：/org/edit/** 或者 /org/edit'));
                    // }
                    callback();
                }
            };
            return {
                menuTreeList: [],
                authObj: {},
                authObjCopy:{},
                defaultProps: {
                    children: 'childList',
                    label: 'name'
                },
                defaultChecked: [],
                disabled: true,
                dialogVisible: false,
                nodeId: null,
                currentNode:{},
                dialogFormVisible: false,
                formData: '',
                formSelect: '',
                ruleForm: {
                    name: '',
                    type: 1,
                    menuUrl: '',
                    properties:'',
                    mark:1,
                    menuIconCls:'',
                    parentId:''
                },
                rules: {
                    name: [
                        { required: true, message: '名称为必填项', trigger: 'blur' }
                    ],
                    menuUrl: [
                        { required: true, message: 'URL表达式为必填项', trigger: 'blur' },
                        { validator: validate, trigger: 'blur' }
                    ]
                },
                iconArr:['fa fa-desktop','fa fa-address-book','fa fa-area-chart','fa fa-balance-scale',
                'fa fa-bar-chart','fa fa-calendar','fa fa-tachometer','fa fa-graduation-cap'
                ,'fa fa-users','fa fa-language','fa fa-paper-plane','fa fa-shopping-bag'
                ,'fa fa-home','fa fa-user','fa fa-book','fa fa-circle-o','fa fa-gear','fa fa-info','fa fa-diamond'
                ,'fa fa-th-large'
                ]
            }
        },
        components:{
        },
        computed: {
            checked: function () {
                return this.authObj.id;
            }
        },
        mounted () {
            // this.refresh(true);
            this.getTreeData()
        },
        methods: {
            clearRuleForm:function(){
                for(var key in this.ruleForm){
                    this.ruleForm[key] = ''
                }
                this.ruleForm.type = 1
                this.ruleForm.mark = 1
            },
            getTreeData:function(){
                this.ajaxPost(this.URL.queryPermission.url, null,this.getTreeDataCB)
            },
            getTreeDataCB:function(res){
                if(res.data.status === 1){
                    this.menuTreeList = res.data.datas.permissionList
                    if(this.menuTreeList.length){
                        this.authObj = this.menuTreeList[0]
                        this.authObjCopy = JSON.parse(JSON.stringify(this.authObj))
                        this.defaultChecked = [this.menuTreeList[0].name]
                        if(!this.nodeId){
                            if (this.menuTreeList[0].childList) {
                                let arr = []
                                this.menuTreeList[0].childList.forEach((ele, i) => {
                                    arr.push(ele.name)
                                })
                                this.authObj.childToken = arr.toString()
                            } else {
                                this.authObj.childToken = ''
                            }
                            this.nodeId = this.menuTreeList[0].id
                        }
                    }
                }
            },
            getNodeData:function(id){
                this.ajaxPost(this.URL.findmuneByinfo.url, { permissionid: id },this.getNodeDataCB)
            },
            getNodeDataCB:function(res){
                if(res.data.status === 1){
                    this.authObj = res.data.datas.menuInfo
                    this.authObj.parentName = res.data.datas.parentPermissions.name
                    if (res.data.datas.menuInfo.childList.length) {
                        let arr = []
                        res.data.datas.menuInfo.childList.forEach((ele, i) => {
                            arr.push(ele.name)
                        })
                        this.authObj.childToken = arr.toString()
                    } else {
                        this.authObj.childToken = ''
                    }
                    this.authObjCopy = JSON.parse(JSON.stringify(this.authObj))
                }
            },
            addNodeClick () {
                this.ajaxPost(this.URL.permissionList.url,null,this.addNodeClickCB)
            },
            addNodeClickCB:function(res){
                if(res.data.status === 1){
                    this.clearRuleForm()
                    this.formSelect = res.data.datas.permissionList
                    this.dialogFormVisible = true
                }
            },
            addNodeSure () {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let params = JSON.parse(JSON.stringify(this.ruleForm))
                        this.ajaxPost(this.URL.modifyPermission.url, params,this.addNodeSureCB)
                    }
                });
            },
            addNodeSureCB:function(res){
                if (res.status == 200) {
                    Message({
                        message: '创建成功',
                        type: 'success'
                    })
                    this.getTreeData()
                    this.dialogFormVisible = false
                }
            },
            saveNodeClick () {
                this.dialogVisible = true
            },
            cancelNodeClick:function(){
                MessageBox.alert('确定要取消保存吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: "取消",
                    callback: action => {
                        if (action === "cancel") {
                            return;
                        }
                        this.authObj = JSON.parse(JSON.stringify(this.authObjCopy))
                        this.disabled = true
                    }
                });
            },
            saveNodeSure () {
                let params = JSON.parse(JSON.stringify(this.authObj))
                this.ajaxPost(this.URL.modifyPermission.url, params, this.saveNodeSureCB)
            },
            saveNodeSureCB:function(res){
                if(res.data.status === 1){
                    this.dialogVisible = false
                    this.disabled = true
                    this.getNodeData(this.nodeId)
                    Message({
                        message: '保存成功',
                        type: 'success'
                    });
                }
            },
            currentChange (node) {
                this.nodeId = node.id
                this.currentNode = node
                this.getNodeData(node.id)
            },
            deleteNodeClick () {
                MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 ' + this.authObj.name, {
                    confirmButtonText: '确定',
                    cancelButtonText: "取消",
                    callback: action => {
                        if (action === "cancel") {
                            return;
                        }
                        this.ajaxPost(this.URL.deletePermission.url,{permissionId:this.nodeId},this.deleteNodeSureCB)
                    }
                });
            },
            deleteNodeSureCB:function(res){
                if(res.data.status === 1){
                    this.nodeId = null
                    this.getTreeData()
                    Message({
                        message: '删除成功',
                        type: 'success'
                    });
                }
            },
            ajaxPost:function(url,params,callback){
                var self = this;
                this.Axios.Post(url,params)
                    .then(function(res){
                        if(callback){
                            callback(res,self)
                        }
                    })
            }
        }
    }
</script>
<style>
    input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        color: #1f2d3d;
        font-size: inherit;
        height: 36px;        
        line-height: 1;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    input.small{
        height: 30px;
    }
    input.mini{
        height: 24px;
    }
    .demo-ruleForm {
    padding-right: 60px;
    }
    .demo-ruleForm > .el-input {
    width: 75%;
    }

    .demo-ruleForm > .el-select {
    width: 100%;
    }
    .form-dialog {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 40px 12px 0px;
    }
    .form-dialog span {
    font-weight: bold;
    text-align: right;
    width: 20%;
    }
    .form-dialog > div {
    width: 70%;
    }
    .auth-contain .el-input.is-disabled .el-input__inner {
    background: #fff;
    cursor: auto;
    border: 0;
    color: #1f2d3d;
    }

    .auth-contain .el-input.is-disabled.el-input__inner {
    border: 0;
    background-color: #fff;
    }
    .right-cont-button {
    margin: 0 auto;
    text-align: right;
    padding-right: 35px;
    }
    .auth-contain {
    clear: both;
    }
    .auth-contain > div {
    float: left;
    background-color: #fff;
    margin: 1% 1%;
    min-height: 570px;
    }
    .auth-contain .title {
    font-weight: 600;
    }
    .auth-contain .left-nav {
    width: 36%;
    }
    .auth-contain .right-cont {
    width: 60%;
    }
    .left-nav > div,
    .right-cont > div {
    line-height: 50px;
    height: 50px;
    /* border-bottom:1px solid #eee; */
    padding-left: 20px;
    }
    .left-nav > ul,
    .right-cont > ul {
    padding: 20px 35px 20px 35px;
    }
    .right-cont > ul > li {
        line-height: 3;
        /* border-top: 1px solid #ccc; */
        border-bottom: 1px solid #ccc;
        display: flex;
    }
    .right-cont .liTitle {
        display: inline-block;
        width: 100px;
        text-align: right;
    }
    .right-cont .liValue {
        display: inline-block;
        margin-left: 50px;
    }
    .right-cont > i {
        display: inline-block;
        font-size: 24px;
        color: #fff;
        margin-left: 35px;
    }
    .right-cont > i:hover {
        color: #444;
    }
    .right-cont .refresh,
    .right-cont .delete {
    background-color: #18a689;
    display: inline-block;
    width: 50px;
    line-height: 30px;
    text-align: center;
    height: 30px;
    border-radius: 6px;
    }
</style>
